<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<script src="vuex.js"></script>	
<div id="app">
	
</div>
<script>
	const store = new Vuex.Store({
		state : {
			count : 0,
		},
		
		mutations : {
			increment : function(state){
				state.count++;
			},
			decrement : function(state){
				state.count--;
			}
		},

	})
	const vm = new Vue({
		el : '#app',
		computed : {
			count(){
				return store.state.count;
			}
		},
		template : `<div>
						<span>{{count}}</span>
						<p>
							<button @click='increment'>+</button>
						</p>
						<p>
							<button @click="decrement">-</button>
						</p>
					</div>`,

		methods : {
			increment(){
				store.commit('increment');
			},
			decrement(){
				store.commit('decrement');
			}
		}
	})
	store.commit('increment');
	console.log(store.state.count);
	console.log(store.state);
	console.log(store.commit);
	//现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：
	//
	/**
	 * 再次强调，我们通过提交 mutation 的方式，而非直接改变 store.sta
	 * te.count，是因为我们想要更明确地追踪到状态的变化。这个简单的约
	 * 定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读
	 * 应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每
	 * 次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如
	 * 时间穿梭般的调试体验。
	 * 由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单
	 * 到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 
	 * methods 中提交 mutation。
	 */
</script>	
</body>
</html>